<template>
  <div class="page" :style="{ '--themeBg': hexToRgba(theme, 0.2) }">
    <el-card>
      <div
        v-for="(item, index) in menu"
        :key="index"
        class="menu-item"
        :class="item.path === to ? 'active' : ''"
        @click="handleClick(item)"
      >{{ item.name }}</div>
    </el-card>
    <el-card>
      <div v-if="!to">
        <div class="p-top">
          <avater-edit :user="user" />
        </div>
        <el-divider />
        <el-descriptions :size="size" :column="3">
          <el-descriptions-item label="账号" :span="1">{{ user.username }}</el-descriptions-item>
          <el-descriptions-item label="手机号" :span="1">{{ user.mobile }}</el-descriptions-item>
          <el-descriptions-item label="邮箱" :span="1">{{ user.email }}</el-descriptions-item>
          <el-descriptions-item label="用户名称" :span="1">{{ user.name }}</el-descriptions-item>
          <el-descriptions-item label="性别" :span="1">
            <el-tag v-for="(item, index) in sexList" v-show="item.code == user.sex" :key="index" :size="size">{{ item.label }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户部门" :span="1">
            <el-tag v-if="user.department" :size="size">{{ user.department.name }}</el-tag>
            <el-tag v-else :size="size" type="info">暂无部门</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户角色" :span="3">
            <template v-if="roles.length > 0">
              <el-tag
                v-for="(item, index) in roles"
                :key="index"
                style="margin-right: 10px;"
                :size="size"
              >{{ item.name }}</el-tag>
            </template>
            <el-tag v-else type="info">暂无角色</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户岗位" :span="3">
            <template v-if="posts.length > 0">
              <el-tag
                v-for="(item, index) in posts"
                :key="index"
                style="margin-right: 10px;"
                :size="size"
              >{{ item.name }}</el-tag>
            </template>
            <el-tag v-else type="info">暂无岗位</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <component :is="to" v-else :user="user" :sex-list="sexList" />
    </el-card>
  </div>
</template>
<script>
import avaterEdit from './components/avater-edit'
export default {
  components: { avaterEdit },
  data() {
    return {
      // 个人中心菜单
      menu: [
        {
          name: '个人信息',
          path: ''
        },
        {
          name: '信息编辑',
          path: () => import('./components/info-edit')
        },
        {
          name: '修改密码',
          path: () => import('./components/edit-pwd')
        }
      ],
      // 当前path
      to: '',
      // 性别字典
      sexList: []
    }
  },
  computed: {
    // 主题色
    theme() {
      return this.$store.state.settings.theme
    },
    // 布局大小
    size() {
      return this.$store.state.app.size
    },
    // 个人信息
    user() {
      return this.$store.state.user.data
    },
    // 绑定角色
    roles() {
      return this.user.roles && this.user.roles.length ? this.user.roles : []
    },
    // 绑定岗位
    posts() {
      return this.user.posts && this.user.posts.length ? this.user.posts : []
    }
  },
  async created() {
    // 获取数据字典
    this.sexList = await this.getDictInfo('dict_sex')
  },
  methods: {
    handleClick(e) {
      this.to = e.path || ''
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  margin: 0 12px;
}

.page>.el-card:first-child {
  width: 15%;
  float: left;
  margin-right: 12px;
}

.page>.el-card:first-child ::v-deep .el-card__body {
  padding: 12px !important;
}

.menu-item {
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  color: #333;
}

.active {
  background-color: var(--themeBg);
  border-radius: 40px;
  font-weight: 600;
}

.p-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-t-right {
  line-height: 26px;
  margin-left: 12px;
}

.p-t-right h3 {
  margin: 0 !important;
}

::v-deep .el-descriptions__body {
  color: #333 !important;
}

.el-descriptions ::v-deep td >div {
  line-height: 30px;
}

.el-descriptions ::v-deep .el-descriptions-item__label {
  font-weight: 600;
}

.el-descriptions ::v-deep .el-descriptions-item__content {
  align-items: center;
}
</style>
